@tailwind base;
@tailwind components;
@tailwind utilities;

html {
  scroll-behavior: smooth;
}

@layer base {
  :root {
    /* Main background and text colors */
    --background: 150 30% 96%; /* #F2F8F6 */
    --foreground: 162 30% 8%; /* #0E1A17 */

    /* Card and popover styling */
    --card: 150 25% 92%; /* #E5F0ED */
    --card-foreground: 162 30% 8%; /* #0E1A17 */
    --popover: 150 30% 96%; /* #F2F8F6 */
    --popover-foreground: 162 30% 8%; /* #0E1A17 */

    /* Primary colors (from your logo) */
    --primary: 157 100% 75%; /* #7FFFC4 */
    --primary-foreground: 186 94% 13%; /* #023A41 */

    /* Secondary colors */
    --secondary: 217 91% 67%; /* #5C94F7 */
    --secondary-foreground: 0 0% 100%; /* #FFF */

    /* Muted colors */
    --muted: 157 25% 88%; /* #D8E9E4 */
    --muted-foreground: 186 94% 13%; /* #023A41 */

    /* Accent colors */
    --accent: 320 100% 80%; /* Brighter pink for better contrast (orginal: #FFC4EB) */
    --accent-foreground: 162 30% 8%; /* #0E1A17 */

    /* Destructive colors (keeping your existing one) */
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 100%; /* #FFF */

    /* Border and input styling */
    --border: 157 25% 88%; /* #D8E9E4 */
    --input: 157 25% 88%; /* #D8E9E4 */
    --ring: 157 100% 75%; /* #7FFFC4 */

    /* Radius */
    --radius: 0.5rem;

    /* Chart colors */
    --chart-1: 157 100% 75%; /* #7FFFC4 */
    --chart-2: 320 100% 88%; /* #FFC4EB */
    --chart-3: 217 91% 67%; /* #5C94F7 */
    --chart-4: 49 97% 51%; /* #FED807 */
    --chart-5: 186 94% 13%; /* #023A41 */

    /* Color palette */
    --color-1: 157 100% 75%; /* #7FFFC4 */
    --color-2: 320 100% 88%; /* #FFC4EB */
    --color-3: 217 91% 67%; /* #5C94F7 */
    --color-4: 49 97% 51%; /* #FED807 */
    --color-5: 186 94% 13%; /* #023A41 */

    --header-height: 3.5rem;
    font-family: Inter, sans-serif;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11", "salt";
  }
}

.shadow-light {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.085);
}

.shadow-dark {
  box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.141);
}

@layer base {
  * {
    @apply border-border;
  }

  @supports (font-variation-settings: normal) {
    :root {
      font-family: InterVariable, sans-serif;
      font-feature-settings: "cv02", "cv03", "cv04", "cv11", "salt";
    }
  }

  body {
    @apply bg-background text-foreground;
  }

  /* Font utility classes */
  .font-sentient {
    font-family: var(--font-sentient-light), serif;
  }

  .font-heading {
    font-family: var(--font-sentient-light), serif;
  }

  /* width */
  ::-webkit-scrollbar {
    width: 5px;
  }

  ::-webkit-scrollbar:horizontal {
    height: 5px;
  }

  /* Fix for scrollbar corner overlap */
  ::-webkit-scrollbar-corner {
    background: transparent;
  }

  ::-webkit-scrollbar-track {
    background-color: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: hsl(var(--border));
  }
}

/* Icon animations */
@keyframes icon-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(127, 255, 196, 0.4);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(127, 255, 196, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(127, 255, 196, 0);
  }
}

@keyframes icon-float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0px);
  }
}

.icon-container {
  transition: all 0.3s ease;
}

.icon-container:hover {
  transform: scale(1.1);
}

.pulse-animation {
  animation: icon-pulse 2s infinite;
}

.float-animation {
  animation: icon-float 3s ease-in-out infinite;
}
